<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="注册成功">
			用户名:<input type="text" name="username" id="input1" /><br />
			密码：<input type="text" name="password" id="input2" /><br />
			<input type="submit"/>
			<input type="reset"/>
		</form>
		
		<script>
			//onfocus 获得焦点
			input1.onfocus = function()
			{
				// 通过event.target得到当前触发事件的对象
				var obj = event.target;
				obj.style.backgroundColor = "#ff0000";
			}
			
			//onblur 获得焦点
			input1.onblur = function()
			{
				
				var obj = event.target;
				obj.style.backgroundColor = "#ffffff";
			}
			
			input1.onchange = function()
			{
				console.log("内容改变了")
			}
			
			// onsubmit 表单提交时触发的事件
			form1.onsubmit=function()
			{
				console.log("表单提交，检查表单内容是否真确")
				return true
			}
			
			// onreset 表单内容重置
			form1.onreset = function()
			{
				console.log("表单重置")
			}
			
			//练习：
			//编写一个用户注册页面
			//用户名
			//密码
			//重置密码
			//邮箱
			//电话号码
			
			//1.用户输入用户名后，使用onchange 检测用户名长度是否大于》6
			//2.表单元素获得焦点时背景颜色变深，失去焦点时变浅
			//3.检测密码和重复密码是否一致
			//4.电话号码只允许输入数字
			//5.表单提交时，检测输入是否正确，正确可提交看，不正确不可以提交
		</script>
		
	</body>
</html>
